<template>
  <div class="edit">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="编辑代理商" width="40%">
      <el-form :model="form" label-width="120px" >
        <el-form-item label="代理商身份">
          <el-radio-group v-model="form.identity">
            <el-radio label="org">机构</el-radio>
            <el-radio label="person">个人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="代理商编号">
          <span>{{ id }}</span>
        </el-form-item>
        <div v-if="form.identity === 'org'">
          <el-form-item label="机构联系方式">
            <el-input v-model="form.phone"/>
          </el-form-item>
          <el-form-item label="机构名称">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="机构地址">
            <el-input v-model="form.address"/>
          </el-form-item>
          <el-form-item label="组织机构代码">
            <el-input v-model="form.orgCode"/>
          </el-form-item>
          <el-form-item label="E-mail">
            <el-input v-model="form.email"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.memo"/>
          </el-form-item>
        </div>
        <div v-if="form.identity === 'person'">
          <el-form-item label="个人联系方式">
            <el-input v-model="form.phone"/>
          </el-form-item>
          <el-form-item label="个人姓名">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="form.idCard"/>
          </el-form-item>
          <el-form-item label="居住地">
            <el-input v-model="form.address"/>
          </el-form-item>
          <el-form-item label="E-mail">
            <el-input v-model="form.email"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.memo"/>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    dialogVisible() { return this.data.dialog },
    id() { return this.data.tableData.id },
    form() { return this.data.tableData }
  },
  methods: {
    handleClose() {
      this.$emit('editClosed')
    },
    handleSubmit() {
      this.$emit('editSubmit', this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
.edit {
  .el-input {
    width: 80%;
  }
}
</style>
